import { animate } from "./anim.js";
import { items, colors } from "./config.js";
let isRunning = false;
function init() {
  let button = document.querySelector(".start");
  let target = document.querySelector("#canvas");
  let spanResult = document.querySelector(".result");
  let angleItem = 360 / items.length;
  let angleOffset = 360 - 90 - angleItem / 2;
  var lastAngle = 0;
  button.onclick = () => {
    if (isRunning) {
      console.log('is running')
      return;
    }
    isRunning = true;
    //set button disable
    button.attributes.setNamedItem(document.createAttribute("disabled"));
    spanResult.style.backgroundColor = "green";
    spanResult.textContent = "抽奖中...";
    let index = Math.floor(Math.random() * items.length);
    let targetAngle = ((angleOffset - angleItem * index) % 360) + 360 * 5;
    console.log("rotate:", index, targetAngle);
    animate(
      3500,
      lastAngle % 360,
      targetAngle,
      (val) => {
        target.style.transform = `rotate(${val}deg)`;
      },
      () => {
        spanResult.style.backgroundColor = colors[index % colors.length];
        spanResult.textContent = `请吃【${items[index]}】`;
        isRunning = false;
        button.attributes.removeNamedItem("disabled");
        console.log("rotate end");
      }
    );
    lastAngle = targetAngle;
  };
}
export { init };
